<template>
  <div style="padding-bottom: 0.5rem">
   <div class="topBar">专题栏</div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        class="topicBox"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div v-for="item in topicList" :key="item.id" class="item">
          <img :src="item.scene_pic_url" alt="" />
          <div class="desc">
            <p>{{ item.subtitle }}</p>
            <p>{{ item.title }}</p>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { GetTopicList } from "@/request/api";
export default {
  data() {
    return {
      page: 1,
      size: 10,
      topicList: [], //数组
      isLoading: false,
      loading: false,
      finished: false,
      refreshing: false,
      json: [
        {
          id: 3,
          price_info: 0,
          scene_pic_url: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1234940918,4035050611&fm=26&gp=0.jpg",
          subtitle: "专业运动品牌同厂，毛毛虫鞋买二送一",
          title: "关爱他成长的每一个足迹",
        },
        {
          id: 34,
          price_info: 0,
          scene_pic_url: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3415856027,1335419160&fm=26&gp=0.jpg",
          subtitle: "专业运动品牌同厂，毛毛虫鞋买二送一",
          title: "关爱他成长的每一个足迹",
        },
        {
          id: 31,
          price_info: 0,
          scene_pic_url: "https://yanxuan.nosdn.127.net/14943267735961674.jpg",
          subtitle: "专业运动品牌同厂，毛毛虫鞋买二送一",
          title: "关爱他成长的每一个足迹",
        },
        {
          id: 14,
          price_info: 0,
          scene_pic_url: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3415856027,1335419160&fm=26&gp=0.jpg",
          subtitle: "专业运动品牌同厂，毛毛虫鞋买二送一",
          title: "关爱他成长的每一个足迹",
        },
        {
          id: 14,
          price_info: 0,
          scene_pic_url: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1204260427,575178572&fm=26&gp=0.jpg",
          subtitle: "专业运动品牌同厂，毛毛虫鞋买二送一",
          title: "关爱他成长的每一个足迹",
        },
        {
          id: 14,
          price_info: 0,
          scene_pic_url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2753487324,338123850&fm=26&gp=0.jpg",
          subtitle: "专业运动品牌同厂，毛毛虫鞋买二送一",
          title: "关爱他成长的每一个足迹",
        },
        {
          id: 14,
          price_info: 0,
          scene_pic_url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180825%2Fafeb9e1814254c4a97d1a04299cb4b05.gif&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616245910&t=722fc457fac98b1d85b34fe313931ce1",
          subtitle: "专业运动品牌同厂，毛毛虫鞋买二送一",
          title: "关爱他成长的每一个足迹",
        },
      ],
    };
  },
  created() {
    GetTopicList({
      page: this.page,
      size: this.size,
    }).then((res) => {
      console.log(res);
      if (res.errno == 0) {
        console.log(res.data);
        this.topicList = res.data.data;
      }
    });
  },
  methods: {
    //下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        if (this.page == 3) {
          this.page = 1;
        }
        let num = this.page++;
        GetTopicList({
          page: num,
          size: this.size,
        }).then((res) => {
          if (res.errno == 0) {
            this.topicList = res.data.data;
          }
        });

        this.finished = false;
        this.isLoading = true;
        this.loading = true;
        this.onLoad();
      }, 1000);
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          //   this.topicList = [];
          this.refreshing = false;
        }
        for(let i=0;i<this.json.length;i++){
            this.topicList.push(this.json[i])
        }
        this.loading = false;

        if (this.topicList.length >= 15) {
          this.finished = true;
        }
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
.topBar{
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  font-size: 16px;
  background: #f40;
}
.topicBox {
  background-color: #fff;
  .item {
    padding: 0 2%;
    display: flex;
    img {
      width: 0.6rem;
      height: 0.6rem;
      padding: 1%;
    }
    .desc {
      text-align: left;
      p{
        line-height: 0.2rem;
      }
    }
  }
}
</style>